<template>
  <div class="home">
    <button @click="btnT">dianji</button>
    <!-- <input type="text" v-model="ipt" />
    <input type="text" v-model="ipt1" />
    <button @click="btn">点击</button>
    <input type="checkbox" value="吃" v-model="arr" name id />
    <input type="checkbox" value="喝" v-model="arr" name id />
    <input type="checkbox" value="玩" v-model="arr" name id />
    <input type="checkbox" value="乐" v-model="arr" name id />
    {{arr}}
    <input type="radio" v-model="test" value="男" name id />
    <input type="radio" v-model="test" value="女" name id />
    {{test}}
    <button ref="box">按钮</button>
    <input type="text" v-focus v-model="num" />-->
    <!-- <Child :num="num" @parentNode="parentText"> -->
    <!-- <template v-slot:header>
        <h1>header</h1>
      </template>
      <p>body</p>
      <template v-slot:footer>
        <p>footer</p>
      </template>
    <template v-slot="slotP">{{slotP.obj.age}}</ template>-->
    <!-- </Child> -->
    <div>{{text | capitalize}}</div>{{Num}}
  </div>
</template>

<script>
import Child from "./Child";
import { mapState } from "vuex";
export default {
  name: "Home",
  mixins: [
    {
      data() {
        return {
          mixinsT: "123"
        };
      }
    }
  ],
  data() {
    return {
      ipt: "",
      arr: [],
      test: "",
      num: "999",
      obj: {
        test: "111",
        num: "234"
      },
      text: "abc"
    };
  },
  mounted() {
    console.log(this.$refs.box);
    console.log(this.mixinsT);
  },
  methods: {
    btnT() {
      this.$router.push("/parent");
    },
    btn() {
      console.log(this.ipt);
    },
    parentText(e) {
      console.log(e);
    }
  },
  computed: {
    ...mapState('home',['Num']),
    ipt1() {
      return this.ipt;
    }
  },
  components: {
    Child
  },
  filters: {
    capitalize: function(value) {
      console.log(value);
      return value.charAt(0).toUpperCase() + value.slice(1);
    }
  },
  watch: {
    obj: {
      // handler 不能改变
      handler: function(val, oldVal) {
        console.log(val);
        console.log(oldVal);
      },
      deep: true, //加了以后能监听到obj下面的任意一个属性的值
      immediate: true //页面初始化完成之后就调用监听器
    },
    num: function(newVal, oldVal) {
      console.log(newVal);
      console.log(oldVal); //改变完成之后之前的值
    },
    num(newVal, oldVal) {
      console.log(newVal);
      console.log(oldVal); //改变完成之后之前的值
    }
  },
  directives: {
    // 自定义指令 是一个对象 有五个钩子函数 有
    // oldVnode 只能在componentUpdated Updated使用
    //钩子
    focus: {
      // 在第一次绑定dom初始化的时候调用一次
      bind(el, binding, vnode, oldVnode) {
        // console.log(el);//操作Dom，指令所绑定的元素
        // console.log(binding);//对象
        console.log(vnode); //虚拟节点
        console.log(oldVnode); //上一个虚拟节点
      },
      // 被绑定元素插入父节点时调用
      inserted(el, binding, vnode, oldVnode) {
        // console.log(el);//操作Dom，指令所绑定的元素
        // console.log(binding);//对象
        console.log(vnode); //虚拟节点
        console.log(oldVnode); //上一个虚拟节点
        el.focus();
      },
      // 元素改变时调用(虚拟DOm修改的时候)
      update(el, binding, vnode, oldVnode) {
        // console.log(el);//操作Dom，指令所绑定的元素
        // console.log(binding);//对象
        console.log(vnode); //虚拟节点
        console.log(oldVnode); //上一个虚拟节点
      },
      // 父子节点全部改变完场后调用（真实Dom修改的修改）
      componentUpdated(el, binding, vnode, oldVnode) {
        // console.log(el);//操作Dom，指令所绑定的元素
        // console.log(binding);//对象
        console.log(vnode); //虚拟节点
        console.log(oldVnode); //上一个虚拟节点
      },
      // 指令与元素解绑时调用只调用一次(dom元素不存在的时候 v-if=true)
      unbind(el, binding, vnode, oldVnode) {
        // console.log(el);//操作Dom，指令所绑定的元素
        // console.log(binding);//对象
        console.log(vnode); //虚拟节点
        console.log(oldVnode); //上一个虚拟节点
      }
    }
  }
};
</script>
